<template>
  <div class="alarm-analysis">
    <div class="mintitle">
      <div class="charttitle">
        泵房告警及故障分析
      </div>
      <div class="line" />
      <div :class="['btn-item',btnTitle === item ? 'btn-active' : '']" v-for="(item,index) in btnList" :key="index" @click="changeBtn(item)">{{item}}</div>
    </div>
    <AlarmVue
      :chartTitle="btnTitle"
      :alarm="alarm">
    </AlarmVue>
    <FaultVue
      :chartTitle="btnTitle"
      :fault="fault">
    </FaultVue>
  </div>
</template>

<script>
import AlarmVue from './alarm.vue';
import FaultVue from './fault.vue';
import { analysisData } from '../common/titles';
export default {
  data() {
    return {
      analysisInfo: {},
      btnList: ['近1天', '近7天', '近30天'],
      btnTitle: '近1天'
    };
  },

  components: {
    AlarmVue,
    FaultVue
  },

  computed: {
    routeId() {
      return this.$route.params.id;
    },
    alarm() {
      return this.analysisInfo !== undefined ? this.analysisInfo['alarm'] : {};
    },
    fault() {
      return this.analysisInfo !== undefined ? this.analysisInfo['fault'] : {};
    }
  },

  mounted() {
    this.changeBtn('近1天');
  },

  methods: {
    changeBtn(item) {
      this.btnTitle = item;
      this.analysisInfo = analysisData[this.routeId]?.[this.btnTitle];
    }
  }
};
</script>
<style scoped lang="scss">
.alarm-analysis {
  .mintitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .9375rem;
    .charttitle {
      font-size: 0.75rem;
      color: $light2Grey;
      margin-right: 0.3125rem;
    }
    .line {
      flex: 1;
      height: 0.0625rem;
      margin-right: 0.3125rem;
      border-bottom: 0.0625rem dashed $darkGrey;
    }
    .btn-item{
      text-align: center;
      font-size: .75rem;
      color: #ADADAD;
      background-color: #263549;
      margin-right: 0.3125rem;
      padding: 0 .3125rem;
      box-sizing: border-box;
      cursor: pointer;
    }
    .btn-item:last-child{
      margin-right: 0;
    }
    .btn-active{
      color: #00fdff;
      background-color: #044559;
    }
  }
}
</style>
